import React, { Component } from 'react'
import { hashHistory } from 'react-router'
import { NavHeader } from '../common'

export default class ExpTicket extends Component {
  constructor() {
    super()
    this.state = {
      tabIndx: 0,
    }
  }
  render() {
    const { tabIndx } = this.state
    return (
      <div className={`rt-exp-ticket-container cm-column-flex-box`}>
        <NavHeader title="体验券" onClick={() => hashHistory.goBack()} />

        <div className={`cm-tabs-box`}>
          {
            ['我的体验券', '领取体验券'].map((v, i) => (
              <span
                key={i}
                className={`${tabIndx === i ? '-active' : ''}`}
                onClick={() => {
                  if (tabIndx === i) return
                  this.setState({tabIndx: i})
                }}
              >
                {v}
              </span>
            ))
          }
        </div>

        <div className={`cm-hint-message-box`}>
          <span>体验券：3张</span>
          <span className={`-rule`}>使用规则</span>
        </div>

        <div className={`cm-scrollable-container`}>
          {
            Array(3).fill(1).map((v, i) => (
              <div key={Math.random()} className={`rt-exp-ticket ${i === 0 ? '-first' : ''}`}>
                <div className={`-above`}>
                  <strong>8元白银体验券</strong>
                </div>
                <div className={`-below`}>
                  有效期2016年6月30日至2016年6月30日
                </div>
                <div className={`-op-btn`}>
                  立即下单
                </div>
              </div>
            ))
          }
          {
            Array(3).fill(1).map(v => (
              <div key={Math.random()} className={`rt-exp-ticket -grey`}>
                <div className={`-above`}>
                  <strong>8元白银体验券</strong>
                </div>
                <div className={`-below`}>
                  有效期2016年6月30日至2016年6月30日
                </div>
                <img alt="used" src={require('static/images/used.png')} />
              </div>
            ))
          }
        </div>
      </div>
    )
  }
}